<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="account" value="123">
    <label for=""></label>
    <div id="box"></div>

    <script>
        const accountEle = document.getElementById('account');
        console.log(accountEle.type);
        console.log(accountEle.getAttribute("type"));

        // console.log(accountEle.id);

        

        // accountEle.value = "admin";
        accountEle.setAttribute("value", "admin");

        // 删除属性
        accountEle.removeAttribute("value");

        // 判断是否包含
        console.log(accountEle.hasAttribute("value"));
        


        // 特殊属性 class-className   for-htmlFor

        accountEle.className = "username";
        accountEle.setAttribute("class", "abc");
        
        // 动态样式操作
        // box.style = "width: 100px; height: 100px; background-color: orange"
        box.style.width = "100px";
        box.style.height = "100px";
        box.style.backgroundColor = "red";




    </script>
</body>

</html>